<template>
  <container title="应用版本">
    <div class="main-card" v-loading="loading">
      <tbc-pagination :total="total" simple :config="{page, size}" @change="loadDataList">
        <template v-slot:left>
          <el-input placeholder="关键字" class="short" v-model="keyword" clearable size="small"
                    style="margin-right:10px;width:200px;">
            <template #prefix>
              <i class="el-input__icon el-icon-search"></i>
            </template>
          </el-input>
          <el-button
              icon="el-icon-search" type="primary" size="small"
              @click="loadDataList(1)">查询
          </el-button>
        </template>
        <template v-slot:right>
          <el-button size="small" icon="el-icon-plus" circle @click="$refs.form.show()"></el-button>
          <el-button size="small" icon="el-icon-refresh" circle @click="loadDataList(page)"></el-button>
        </template>
      </tbc-pagination>
      <div class="data-container">
        <tbc-dynamic-table
            v-loading="loading"
            :data="dataList"
            :cols="[
            {type: 'selection', width: 60},
            {label: '平台', prop: 'platform', width: 220},
            {label: '版本名称', prop: 'version_name', width: 220},
            {label: '版本号', prop: 'version_number', width: 120, align: 'center'},
            {label: '开启更新', prop: 'status', type: 'switch', width: 180},
            {label: '强制更新', prop: 'force_update', type: 'switch', width: 180},
            {label: '操作', width: 140, type: 'action', fixed: 'right', click: onButtonClick,
              button: [
                {label: '编辑', type: 'text', code: 'edit'},
                {label: '删除', type: 'text', code: 'distribute'},
              ]}]">
          <template #platform="scope">
            <p v-if="scope.row.platform === 'ios'">苹果</p>
            <p v-if="scope.row.platform === 'android'">安卓</p>
          </template>
        </tbc-dynamic-table>
      </div>
      <tbc-pagination :total="total" :config="{page, size}" @change="loadDataList"/>
    </div>
  </container>
  <version-form ref="form" @success="loadDataList"/>
</template>

<script lang="ts">
import {defineAsyncComponent, defineComponent, onMounted, ref, Ref} from 'vue'
import useVersion from './api/version'

export default defineComponent({

  name: 'app-version-list',

  components: {
    VersionForm: defineAsyncComponent(() =>
        import('./VersionForm.vue')),
  },

  setup() {
    const version = useVersion()
    const form: Ref = ref(null)
    const distribute: Ref = ref(null)


    // 点击按钮
    const onButtonClick = (data: { version_id: string }, action: string) => {
      if (action === 'edit') return form.value.show(data)
      if (action === 'delete') return version.deleteDataItem(data)
    }

    onMounted(() => {
      version.loadDataList(1)
    })

    return {
      ...version,
      form,
      distribute,
      onButtonClick
    }
  }
})
</script>
